<%-- 
    Document   : new_report
    Created on : Apr 27, 2013, 8:14:08 PM
    Author     : fikri
--%>
<%@ include file="/WEB-INF/jsp/include/page_header.jspf" %>
<%@ taglib prefix="display" uri="http://displaytag.sf.net"%>
<%@page contentType="text/html" pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
        <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.blockUI.js"></script>      
        <title>.: Observation : new report :.</title>

        <script type="text/javascript">
            $(function() {
                $("#tabs").tabs({active: $('#tabPosition').val()});
                $('.hidden').hide();
                $("#datepicker2").datepicker({
                    showOn: "button",
                    buttonImage: "${pageContext.request.contextPath}/images/icon/calendar.gif",
                    buttonImageOnly: true,
                    changeMonth: true,
                    changeYear: true,
                    dateFormat: 'dd/mm/yy',
                    minDate: '-3Y',
                    maxDate: new Date()
                });

                $("#dialog-form").dialog({
                    autoOpen: false,
                    height: 700,
                    width: 900,
                    modal: true,
                    buttons: {
                        "Save": function() {    
                            var id = $('#_seq').val();
                            if (isNaN(id)) {
                                alert('Please insert number!!');
                                return;
                            }
                            var title = $('#_title').val();
                            var detail = $('#_detail').val();
                            var info = $('#_info').val();
                            var severity = $('#_severity').val();
                            if (id === '' || title === '' || detail === '' || info === '' || severity === '') {
                                alert('All form fields are required!');
                                return;
                            }
                            var frm = document.forms.popupForm;
                            frm.action = frm.action + '?saveTask';
                            frm.submit();
                        },
                        Cancel: function() {
                            $(this).dialog("close");
                        }
                    },
                    close: function() {
                    }
                });
                $("#dialog-form").next(".ui-button-text button:contains('Save')").attr("disabled", true);

            });

            function editTask(id) {
                var url = '${pageContext.request.contextPath}/observation?addEditTaskForm&ids=' + id + '&id=' + $('#parent').val();
                $.get(url, function(data) {
                    $('#dialog-form').html(data);
                });
                $("#dialog-form").dialog("open");
            }

            function deleteDocument(id, ids) {
                var url = '${pageContext.request.contextPath}/observation?deleteDocument&id=' + id + '&ids=' + ids;
                $.get(url, function(data) {
                    $('#dialog-form2').html(data);
                });
            }

            function popupWin(id) {
                var url = '${pageContext.request.contextPath}/observation?viewDocuments&id=' + id;
                var left = (screen.width / 2) - (1000 / 2);
                var top = (screen.height / 2) - (1000 / 2);
                var params = 'width=1000';
                params += ', height=1000';
                params += ', top=' + top;
                params += ', left=' + left;
                //params += ', fullscreen=yes';
                params += ', directories=no';
                params += ', location=no';
                params += ', menubar=no';
                params += ', resizable=no';
                params += ', scrollbars=yes';
                params += ', status=no';
                params += ', toolbar=no';
                newwin = window.open(url, 'PopUp', params);
                if (window.focus) {
                    newwin.focus();
                }
                return false;
            }
            function validateGeneral() {
                if ($('#vessel').val() === '' || $('#datepicker2').val() === '' 
                        || $('#location').val() === '' || $('#nameMaster').val() === '' 
                        || $('#nameChief').val() === '' || $('#nameOfficer').val() === '' || $('#nameEngineer').val() === '') {
                    alert('All form fields are required!');
                    return false;
                }
                return true;
            }

            function unblockUI() {
                $.unblockUI();
            }

            function blockUI() {
                $.blockUI();
            }
            
        </script>
    </head>
    <body>        
        <s:errors/>
        <s:messages/>
        <s:useActionBean beanclass="exatrez.stripes.util.ListUtil" var="list"/>
        <s:form beanclass="exatrez.stripes.action.ObservationAction" name="form1">
            <s:hidden name="tabPosition" id="tabPosition"/>
            <s:hidden name="observation.observationId" id="parent"/>
            <s:hidden name="observation.infoAudit.createId.userId"/>
            <div>                
                <div id="page-title">
                    <span class="title">General</span>
                </div>                   
                <table border="0" align="center" width="80%">
                    <tr>
                        <td width="13%" style="vertical-align: top; text-align: left;"><b>Vessel</b></td>
                        <td width="1%" style="vertical-align: top; text-align: left;"><b>:</b></td>
                        <td width="20%" style="vertical-align: top; text-align: left;">
                            <c:choose>
                                <c:when test="${fn:length(actionBean.observation.taskList) eq 0}">
                                    <s:select name="observation.vessel.vesselId" style="width:250px" id="vessel" class="clearAll">
                                        <s:option value="">Please Choose</s:option>
                                        <s:options-collection collection="${list.vesselList}" label="vesselName" value="vesselId"/>
                                    </s:select>
                                </c:when>
                                <c:otherwise>
                                    ${actionBean.observation.vessel.vesselName}
                                    <s:hidden name="observation.vessel.vesselId"/>
                                </c:otherwise>
                            </c:choose>
                            <%--s:select name="observation.vessel.vesselId" style="width:250px" id="vessel" class="clearAll">
                                        <s:option value="">Please Choose</s:option>
                                        <s:options-collection collection="${list.vesselList}" label="vesselName" value="vesselId"/>
                                    </s:select--%>
                        </td>
                        <td width="16%" style="vertical-align: top; text-align: left;">&nbsp;</td>
                        <td width="13%" style="vertical-align: top; text-align: left;"><b>Master</b></td>
                        <td width="1%" style="vertical-align: top; text-align: left;"><b>:</b></td>
                        <td width="36%" style="vertical-align: top; text-align: left;">
                            <%--c:choose>
                                <c:when test="${fn:length(actionBean.observation.taskList) eq 0}">
                                    <s:text name="observation.nameMaster" maxlength="200" class="uppercase clearAll" id="nameMaster" style="width:350px"/>
                                </c:when>
                                <c:otherwise>
                                    ${actionBean.observation.nameMaster}&nbsp;
                                </c:otherwise>
                            </c:choose--%>
                            <s:text name="observation.nameMaster" maxlength="200" class="uppercase clearAll" id="nameMaster" style="width:350px"/>
                        </td>
                    </tr>
                    <tr>
                        <td style="vertical-align: top; text-align: left;"><b>Date Of Inspection</b></td>
                        <td style="vertical-align: top; text-align: left;"><b>:</b></td>
                        <td style="vertical-align: top; text-align: left;">
                            <c:choose>
                                <c:when test="${fn:length(actionBean.observation.taskList) eq 0}">
                                    <s:text name="observation.dateOfInspection" id="datepicker2" formatType="date" formatPattern="dd/MM/yyyy"
                                    onblur="editDateBlur(this, 'DD/MM/YYYY')"
                                    onkeypress="return editDatePre(this, 'DD/MM/YYYY', event)"
                                    onkeyup="return editDate(this, 'DD/MM/YYYY', event);" class="clearAll" readonly="true"/>                              
                                </c:when>
                                <c:otherwise>
                                    <fmt:formatDate value="${actionBean.observation.dateOfInspection}" pattern="dd/MM/yyyy"/>
                                    <s:hidden name="observation.dateOfInspection" formatType="date" formatPattern="dd/MM/yyyy"/>
                                </c:otherwise>
                            </c:choose>
                             <%--s:text name="observation.dateOfInspection" id="datepicker2" formatType="date" formatPattern="dd/MM/yyyy"
                                    onblur="editDateBlur(this, 'DD/MM/YYYY')"
                                    onkeypress="return editDatePre(this, 'DD/MM/YYYY', event)"
                                    onkeyup="return editDate(this, 'DD/MM/YYYY', event);" class="clearAll"/--%>
                        </td>
                        <td style="vertical-align: top; text-align: left;">&nbsp;</td>
                        <td style="vertical-align: top; text-align: left;"><b>Chief Engineer</b></td>
                        <td style="vertical-align: top; text-align: left;"><b>:</b></td>
                        <td style="vertical-align: top; text-align: left;">
                            <%--c:choose>
                                <c:when test="${fn:length(actionBean.observation.taskList) eq 0}">
                                    <s:text name="observation.nameChief" maxlength="200" class="uppercase clearAll" id="nameChief" style="width:350px"/>
                                </c:when>
                                <c:otherwise>
                                    ${actionBean.observation.nameChief}&nbsp;
                                </c:otherwise>
                            </c:choose--%>
                            <s:text name="observation.nameChief" maxlength="200" class="uppercase clearAll" id="nameChief" style="width:350px"/>
                        </td>
                    </tr>
                    <tr>
                        <td style="vertical-align: top; text-align: left;"><b>Location</b></td>
                        <td style="vertical-align: top; text-align: left;"><b>:</b></td>
                        <td style="vertical-align: top; text-align: left;">
                            <%--c:choose>
                                <c:when test="${fn:length(actionBean.observation.taskList) eq 0}">
                                    <s:text name="observation.location" class="uppercase clearAll" id="location" style="width:250px"/>                            
                                </c:when>
                                <c:otherwise>
                                    ${actionBean.observation.location}
                                </c:otherwise>
                            </c:choose--%>
                            <s:text name="observation.location" class="uppercase clearAll" id="location" style="width:250px"/>                            
                        </td>
                        <td style="vertical-align: top; text-align: left;">&nbsp;</td>
                        <td style="vertical-align: top; text-align: left;"><b>Chief Officer</b></td>
                        <td style="vertical-align: top; text-align: left;"><b>:</b></td>
                        <td style="vertical-align: top; text-align: left;">
                            <%--c:choose>
                                <c:when test="${fn:length(actionBean.observation.taskList) eq 0}">
                                    <s:text name="observation.nameOfficer" maxlength="200" class="uppercase clearAll" id="nameOfficer" style="width:350px"/>
                                </c:when>
                                <c:otherwise>
                                    ${actionBean.observation.nameOfficer}&nbsp;
                                </c:otherwise>
                            </c:choose--%>
                            <s:text name="observation.nameOfficer" maxlength="200" class="uppercase clearAll" id="nameOfficer" style="width:350px"/>
                        </td>
                    </tr>
                    <tr>
                        <td style="vertical-align: top; text-align: left;">&nbsp;</td>
                        <td style="vertical-align: top; text-align: left;">&nbsp;</td>
                        <td style="vertical-align: top; text-align: left;">&nbsp;</td>
                        <td style="vertical-align: top; text-align: left;">&nbsp;</td>
                        <td style="vertical-align: top; text-align: left;"><b>2nd Engineer</b></td>
                        <td style="vertical-align: top; text-align: left;"><b>:</b></td>
                        <td style="vertical-align: top; text-align: left;">
                            <%--c:choose>
                                <c:when test="${fn:length(actionBean.observation.taskList) eq 0}">
                                    <s:text name="observation.nameEngineer" maxlength="200" class="uppercase clearAll" id="nameEngineer" style="width:350px"/>
                                </c:when>
                                <c:otherwise>
                                    ${actionBean.observation.nameEngineer}&nbsp;
                                </c:otherwise>
                            </c:choose--%>
                            <s:text name="observation.nameEngineer" maxlength="200" class="uppercase clearAll" id="nameEngineer" style="width:350px"/>
                        </td>
                    </tr>
                    <tr>
                        <td style="vertical-align: top; text-align: left;">&nbsp;</td>
                        <td style="vertical-align: top; text-align: left;">&nbsp;</td>
                        <td style="vertical-align: top; text-align: left;">&nbsp;</td>
                        <td style="vertical-align: top; text-align: left;">
                            <%--c:if test="${fn:length(actionBean.observation.taskList) eq 0}">
                                <s:submit name="saveGeneral" value="Save" class="btn" onclick="return validateGeneral();"/>
                                <s:button name="clear" value="Clear" class="btn clear"/>      
                            </c:if--%>
                            <s:submit name="saveGeneral" value="Save" class="btn" onclick="return validateGeneral();"/>
                            <s:button name="clear" value="Clear" class="btn clear"/>    
                        </td>
                        <td style="vertical-align: top; text-align: left;">&nbsp;</td>
                        <td style="vertical-align: top; text-align: left;">&nbsp;</td>
                        <td style="vertical-align: top; text-align: left;">&nbsp;</td>
                    </tr>
                </table>
            </div>
            <c:if test="${detail}">
                <div id="tabs">
                    <ul >
                        <li><a href="#tabs-1" id="t1">Executive Summary</a></li>
                        <li><a href="#tabs-2" id="t2">Observation</a></li>                          
                    </ul>
                    <div id="tabs-1">
                        <p>
                            <label style="vertical-align: top">Summary 1 :</label>
                            <s:hidden name="summaryId[0]"/>
                            <s:textarea name="summary[0]" rows="10" cols="60"/>
                        </p>
                        <p>
                            <label style="vertical-align: top">Summary 2 :</label>
                            <s:hidden name="summaryId[1]"/>
                            <s:textarea name="summary[1]" rows="10" cols="60"/>
                        </p>
                        <p>
                            <label>&nbsp;</label>
                            <s:submit value="Save" name="saveSummary" class="btn"/>
                        </p>
                    </div>
                    <div id="tabs-2">
                        <p>
                            <s:button name="add_new" value="add new" id="create-task" onclick="editTask('0');" class="btn"/>
                            <%--s:button name="add_new" value="add new" onclick="showHidden();" id="create-user"/--%>                            

                            <s:hidden name="observationTask.observationTaskId" id="id"/>
                            <s:hidden name="observationTask.title" id="title"/>
                            <s:hidden name="observationTask.detail" id="detail"/>
                            <s:hidden name="observationTask.info" id="info"/>
                            <s:hidden name="observationTask.severity.severityCodeId" id="severity"/>
                            <s:hidden name="observationTask.folder.observationFolderId" id="folder"/>                           
                        </p> 
                        <p>
                            <display:table class="tablecloth" name="${actionBean.observation.taskList}" requestURI="/observation?searchDraftReport" id="line">
                                <display:column title="Obs. ID" ><center>${line.observationTaskId}</center></display:column>
                                <display:column title="Title" property="title"/>       
                                <display:column title="Severity" property="severity.severityName"/>
                                <display:column title="Day Count" property="severityDayCount"/>                                    
                                <display:column title="Upload" ><a href="#" onclick="popupWin('${line.observationTaskId}');
                return false;">Upload</a></display:column>                                                                         
                            <display:column title="Remarks" property="statusRemarks.statusRemarkName"/>
                            <display:column title="Action">
                                <center>
                                    <a href="#" 
                                       onclick="editTask('${line.observationTaskId}');
                return false;">
                                        <img src="${pageContext.request.contextPath}/images/icon/edit.png" alt="edit"/>
                                    </a>
                                    <%-- <a href="observation?deleteTask&id=${line.observationTaskId}" onclick="return confirm('Are you sure to delete this task?');">
                                        <img src="${pageContext.request.contextPath}/images/icon/gnome_edit_delete.png" alt="delete" width="20" height="20"/>
                                    </a> --%>
                                </center>
                            </display:column>
                        </display:table>
                        </p>                              
                    </div>
                </div>
            </c:if>
        </s:form>
        <div id="dialog-form" title="Tasks">
        </div>
    </body>
</html>
